<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="支付订单">
	</u-navbar>
	<u-line color="#FFE58F"></u-line>
	<view class="flex-al-center" style="padding: 5px 0 5px 15px;background-color: #FFFBE6;">
		<u-icon size="25" color="#FFAA00" name="error-circle-fill"></u-icon>
		<text style="font-size: 10px;margin-left: 5px;">下单超过24小时后无法退款；有登录过的学员无法退款</text>
	</view>
	<u-line color="#FFE58F"></u-line>
	<view class="padding-30rpx">
		<view class="padding-30rpx white-bg font-normal" style="border-radius: 8px;">
			<view class="" style="padding-bottom: 10px;font-size: 14px;">
				<text style="font-weight: bold;" :user-select="true">订单编号：{{data.info.num||''}}</text>
        <text v-if="data.info.num" class="copy-text" @click="copyHandle(data.info.num)">复制</text>
			</view>
			<u-line color="#0000001A"></u-line>
			<view class="flex-jc-s-b" style="padding-top:15px;">
				<text class="order-text">创建时间：</text>
				<text class="detail-value">{{data.info.createTime||''}}</text>
			</view>
			<view class="flex-jc-s-b" style="padding-top:15px;" @click="goStudentList">
				<text class="order-text">学员人数：</text>
				<view class="flex-center">
					<text class="detail-value">{{data.info.itemAmount||0}}人</text>

					<u-icon name="arrow-right" size="18" color="#333333" style="margin-left: 4px;" bold="true"></u-icon>
				</view>
			</view>
		</view>
	</view>

	<view class="padding-30rpx" style="padding-top:0">
		<view class="padding-30rpx white-bg font-normal" style="border-radius: 8px;">
			<view class="" style="padding-bottom: 10px;font-size: 14px;">
				<text style="font-weight: bold;">支付方式</text>
			</view>
			<u-line color="#0000001A"></u-line>
			<view style="padding-top: 15px;">
				<u-radio-group
					v-model="data.payType"
					placement="column"
					size="32"
					iconSize="16"
					>
          <!--建培圈有微信支付和线下支付，其他只有线下支付-->
					<u-radio
            v-if="data.projectCode === 'JPQ'"
					  :customStyle="{marginRight: '25px', marginBottom: '15px'}"
					  labelSize="25"
					  key="1"
					  label="微信支付"
					  name="微信支付">
					</u-radio>
					<u-radio
					  :customStyle="{marginRight: '25px', marginBottom: '15px'}"
					  labelSize="25"
					  key="2"
					  label="线下支付"
					  name="线下支付">
					</u-radio>
				</u-radio-group>
			</view>
			<view v-if="data.payType == '线下支付'" style="padding-left:25px">
				<u-line color="#0000001A" dashed></u-line>
				<view class="font-small " style="display: flex;padding-top: 10px;">
					<text class="color-gray">账号名称：</text>
					<text>{{data.bank.name}}</text>
				</view>
				<view class="font-small " style="display: flex;padding-top: 10px;">
					<text class="color-gray">开户银行：</text>
					<text>{{data.bank.bankName}}</text>
				</view>
				<view class="font-small flex-al-center" style="padding-top: 10px;">
					<text class="color-gray">银行账号：</text>
					<text>{{data.bank.account}}</text>
				</view>
				<view style="padding-top: 10px;margin-bottom: 10px;">
					<text class="color-red" >打款时请备注订单编号！</text>
				</view>
				<u-line style="" color="#0000001A" dashed></u-line>
				<view style="margin-bottom: 15px;"></view>
				<u-upload
					:fileList="data.payPicList"
					@afterRead="ajaxUploadPayPic"
					@delete="deletePic"
					:maxCount="1"
					width="172"
					height="172"
					sizeType="['compressed']"
					>
					<image src="@/static/image/order/pay_upload.png"
					mode="scaleToFill" style="width: 95px;height: 95px;"></image>
				</u-upload>
			</view>
		</view>
	</view>

	<view class="bottom-bar white-bg">
		<view style="display: flex;margin: 15px 15px 0 15px;
			align-items: flex-end;justify-content: space-between;">
			<view class="" style="font-size: 13px;margin-top: 5px;margin-right: 15px;">
				<text class="font-small" style="margin-left:7px;margin-right: 3px;">合计:</text>
				<text class="color-orange font-small-x">¥</text>
				<text class="color-orange font-b font-xxx">{{data.info.price}}</text>
			</view>
			<view style="display: flex;" v-if="data.payType != '线下支付'">
				<u-button :customStyle="{'width':'100px',margin:'0'}" plain="true" type="primary"
					shape="circle" text="暂不支付" @click="goPayList"></u-button>
				<u-button :customStyle="{'width':'100px',margin:'0', marginLeft:'10px'}" type="primary"
					shape="circle" text="去支付" @click="goPay"></u-button>
			</view>
			<view style="display: flex;" v-if="data.payType == '线下支付'">
				<u-button :customStyle="{'width':'100px',margin:'0', marginLeft:'10px'}" type="primary"
					shape="circle" text="确认订单" @click="ajaxPayOffline"></u-button>
			</view>
		</view>
	</view>

	<u-popup @close="data.showMessage = false" :customStyle="{'border-radius': '8px'}" :show="data.showMessage" mode='center' :safeAreaInsetBottom="false">
		<view class="common-popup text-center">
			<view class="popup-tip">提示</view>
			<view class="popup-content">{{data.tipMessage}}</view>
			<u-button :customStyle="{'width':'132px', 'height':'40px','fontSzie': '16px'}"
			type="primary" shape="circle" text="确认" @click="confirmMessage"></u-button>
		</view>
	</u-popup>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import pageRoute from '@/utils/pageRoute'
	import { onMounted, reactive, ref, getCurrentInstance } from "vue";
	import { orderDetailApi, refundApi, getConfig, payOffline } from '../const.js'
	import {uploadFile, getWechatPayParams, callWechatPay, getWechatOpenIdWithCache} from '../../../api/common.js'
  import { copyHandle } from "@/utils/common.js";
  const { proxy } = getCurrentInstance()
	const data = reactive({
		id: '',
		info: {},
		showRefund: false,
		bank: {},
		payPicList: [],
		showMessage: false,
		tipMessage: '',
		confirmMessageHandle: null,
    //项目为建培圈(JPQ)时，默认为微信支付；项目为其他时，默认为线下支付
		payType: proxy.getProjectCode() === 'JPQ' ? '微信支付' : '线下支付',
    projectCode: proxy.getProjectCode() || 'JPQ'
	})
	onLoad((options) => {
		data.id = options.id || '';
	})
	onMounted(() => {
		orderDetail()
		ajaxGetBank()
	})

	const orderDetail = () => {
		orderDetailApi(data.id).then((res) => {
			data.info = res.data
		})
	}

	const goStudentList = () => {
		pageRoute.route('pages/order/buy/student-list', {id: data.id, code: data.info.num})
	}

	const ajaxGetBank = () => {
		getConfig('receivingAccount').then((res) => {
			data.bank = res.data
		})
	}

	const ajaxUploadPayPic = (event) => {
		if (data.payPicList.length !== 0) {
			return false;
		}
		let filePath = event.file.url
		let fileData = {filePath: filePath}

		uploadFile(fileData).then((res) => {
			data.payPicList.push({
				url: res.url,
				file: event.file
			});
		})
	}

	const deletePic = () => {
		data.payPicList = [];
	}

	const ajaxPayOffline = () => {
		if (data.payPicList.length == 0) {
			uni.showToast({ title: '请上传付款凭证', icon: 'none', duration: 1500 })
			return
		}
		let payReceiptUrl = data.payPicList[0].url
		let req = {id: data.id, payReceiptUrl: payReceiptUrl}
		payOffline(req).then((res) => {
			data.tipMessage = '提交成功，等待管理员审核'
			data.showMessage = true
			data.confirmMessageHandle = function(){
        pageRoute.routeRedirect('pages/order/query')
			}
		})
	}

	const confirmMessage = () => {
		data.showMessage = false
		if (data.confirmMessageHandle) {
			data.confirmMessageHandle()
			data.confirmMessageHandle = null
		}
	}

	const goPayList = () => {
		pageRoute.route('pages/order/query', {type: 'paying'})
	}

	const goPay = () => {
		getWechatOpenIdWithCache(ajaxGetWechatPayParams)
	}

	const ajaxGetWechatPayParams = (openId) => {
		let orderId = data.id
		let reqData = {openId: openId, orderId: orderId}
		getWechatPayParams(reqData).then((res) => {
			callWechatPay(res.data, paySuccessHandle)
		})
	}

	const paySuccessHandle = () =>{
		pageRoute.routeRedirect('pages/order/buy/pay-success', {id:data.id})
	}

</script>

<style lang="scss" scoped>
	.order-text {
		color: #666666;
	}

	.detail-value {
		color: #333333;
	}

  .copy-text {
    margin-left: 10px;
    font-size: 12px;
    padding: 0 6px;
    background-color: #F6F6F6;
    border-radius: 8px
  }
</style>
